<template>
    <div class="image-preview-container">
        <img :src="imageSrc" @click="previewImage(imageSrc)"
            class="preview-image" />
        <div v-if="previewVisible" class="preview-modal">
            <img :src="previewImageSrc" @click="hidePreview" class="preview-image-large" />
        </div>
    </div>
</template>
<script setup lang="ts">
import {
    ref,
    withDefaults,
    defineProps,
} from "../TUIKit/adapter-vue";

const props = withDefaults(
    defineProps<{
        imageSrc: string;
    }>(),
    {
        imageSrc: '',
    }
);
const previewVisible = ref(false);
const previewImageSrc = ref('');

const previewImage = (imageSrc: string) => {
    previewImageSrc.value = imageSrc;
    previewVisible.value = true;
};

const hidePreview = () => {
    previewVisible.value = false;
};
</script>
<style lang="scss" scoped>
.image-preview-container {
    display: flex;
    flex-wrap: wrap;
}

.preview-image {
    width: 200px;
    height: 200px;
    cursor: pointer;
}

.preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.preview-image-large {
    max-width: 90%;
    max-height: 90%;
    cursor: pointer;
}
</style>